<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>移动端导航切换</title>
    <style>
      .wrap {
        width: 100%;
        display: flex;
        margin: 0.2rem 0 0 0;
        position: relative;
      }

      /*左侧的导航样式*/
      .nav_left {
        display: flex;
        width: 21.1875rem;
        overflow: scroll;
      }

      .nav_left::-webkit-scrollbar {
        display: none;
      }

      .nav_content {
        white-space: nowrap;
        padding: 0 0.7rem;
      }

      .nav_content span {
        display: inline-block;
        padding: 0.4rem 0.6rem;
        font-size: 0.875rem;
      }

      .nav_content .active {
        border-bottom: 2px solid #7f4395;
        color: #7f4395;
      }

      .nav_left,
      .down {
        float: left;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="wrap">
        <div class="nav_left" id="navLeft">
          <div
            class="nav_content"
            v-for="(item,index) in arr"
            @click="activeIndex = index"
          >
            <span :class="{active:activeIndex === index}"
              >{{item.first_name}}</span
            >
          </div>
        </div>
      </div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          activeIndex: 0,
          arr: [
            {
              first_id: '0',
              first_name: '热门'
            },
            {
              first_id: '621',
              first_name: '咖啡'
            },
            {
              first_id: '627',
              first_name: '饮食'
            },
            {
              first_id: '279',
              first_name: '男装'
            },
            {
              first_id: '294',
              first_name: '女装'
            },
            {
              first_id: '122',
              first_name: '眼睛'
            },
            {
              first_id: '339',
              first_name: '内衣配饰'
            },
            {
              first_id: '391',
              first_name: '母婴'
            },
            {
              first_id: '35',
              first_name: '鞋靴'
            },
            {
              first_id: '39',
              first_name: '运动'
            },
            {
              first_id: '153',
              first_name: '箱包'
            },
            {
              first_id: '119',
              first_name: '美妆个护'
            },
            {
              first_id: '355',
              first_name: '家纺'
            },
            {
              first_id: '51',
              first_name: '餐厨'
            },
            {
              first_id: '334',
              first_name: '电器'
            },
            {
              first_id: '369',
              first_name: '家族'
            },
            {
              first_id: '10',
              first_name: '家具'
            },
            {
              first_id: '223',
              first_name: '数码'
            },
            {
              first_id: '429',
              first_name: '汽配'
            },
            {
              first_id: '546',
              first_name: '健康保健'
            },
            {
              first_id: '433',
              first_name: '定制'
            }
          ]
        }
      })
    </script>
  </body>
</html>
